<template>
  <div>
    <div>
      <el-button type="primary" @click="addEdit('add1')"><i class="iconfont icon-plus"></i>添加</el-button>
    </div>
    <div class="mytable">
      <el-table
        :data="mainList"
        stripe
        style="width: 100%">
        <el-table-column
          type="index"
          width="50">
        </el-table-column>
        <el-table-column
          label="一级分类图标"
          width="150"
        >
          <template slot-scope="scope">
            <img class="categoryimg" :src="imgUrl+scope.row.category_icon" alt="">
          </template>
        </el-table-column>
        <el-table-column
          prop="category_name"
          label="一级分类名称"
        >
        </el-table-column>
        <el-table-column
          label="二级分类"
          width="150"
        >
          <template slot-scope="scope">
            <p v-for="item in scope.row.child" class="c999" :key="item.category_id">{{item.category_name}}</p>
            <el-button type="text" @click="addEdit('add2', scope.row)"><i class="iconfont icon-plus"></i>添加</el-button>
          </template>
        </el-table-column>
        <el-table-column
          label="二级排序"
        >
          <template slot-scope="scope">
            <p v-for="(item, index) in scope.row.child" :key="item.category_id">
              <i class="iconfont icon-arrowsupline blod" :class="index===0 ? 'c999' : 'blue'" @click="rankUp(scope.row.child, index)"></i>
              <i class="iconfont icon-arrowsdownline blod" :class="index === scope.row.child.length - 1 ? 'c999' : 'blue'" @click="rankDown(scope.row.child, index)"></i>
            </p>
          </template>
        </el-table-column>

        <el-table-column
          prop="role_name"
          width="150"
          label="二级操作"
        >
          <template slot-scope="scope">
            <p v-for="item in scope.row.child" :key="item.category_id">
              <el-button type="text" @click="addEdit('edit2', item)"><i class="iconfont icon-edit"></i>编辑</el-button>
              <el-button type="text" @click="del(item)"><i class="iconfont icon-del"></i>删除</el-button>
            </p>
          </template>
        </el-table-column>

        <el-table-column
          prop="category_enable"
          :formatter="statusFmt"
          label="状态"
        >
        </el-table-column>
        <el-table-column
          prop="category_audit"
          :formatter="auditFmt"
          label="发布审核"
        >
        </el-table-column>
        <el-table-column
          prop="category_scount"
          label="帖子数"
        >
        </el-table-column>
        <el-table-column
          prop="role_name"
          label="排序"
        >
          <template slot-scope="scope">
            <p>
              <i class="iconfont icon-arrowsupline bigicon" :class="scope.$index===0 ? 'c999' : 'blue'" @click="rankUp(mainList, scope.$index)"></i>
              <i class="iconfont icon-arrowsdownline bigicon" :class="scope.$index === mainList.length - 1 ? 'c999' : 'blue'" @click="rankDown(mainList, scope.$index)"></i>
            </p>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          width="150">
          <template slot-scope="scope">
            <el-button type="text" @click="addEdit('edit1', scope.row)"><i class="iconfont icon-edit"></i>编辑</el-button>
            <el-button type="text" @click="del(scope.row)"><i class="iconfont icon-del"></i>删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        class="pagecon"
        background
        layout="prev, pager, next"
        @current-change="_mainList"
        :current-page.sync="page.curpage"
        :total="page.total">
      </el-pagination>
    </div>
    <!-- // 添加编辑角色 -->
    <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible" @close="initData">
      <el-form ref="form" :model="form" :rules="rules">
        <el-form-item label="图标：" label-width="120px" prop="category_icon">
          <upimg :imgs.sync="imgs" :ismultiple="false"/>
        </el-form-item>
        <el-form-item label="名称：" label-width="120px" prop="category_name">
          <el-input placeholder="请输入" v-model="form.category_name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="状态：" label-width="120px" >
          <el-radio-group v-model="form.category_enable">
            <el-radio v-for="item in statusList" :key="item.id" :label="item.id">{{item.label}}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="发布审核：" label-width="120px"  v-if="dialogMode==='add1' || dialogMode==='edit1'">
          <el-radio-group v-model="form.category_audit">
            <el-radio v-for="item in aduList" :key="item.id" :label="item.id">{{item.label}}</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="doAction">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {getCateGoryList, addOrEditCateGory, delCateGory, rankCateGory} from 'api/categoryManagement'
import upimg from 'components/upimg/upimg'
import config from 'api/config'

export default {
  components: {
    upimg
  },
  computed: {
    imgs: {
      get(){
        console.log('有所改变')
        if(this.form.category_icon){
          return [this.form.category_icon]
        }else{
          return []
        }
      },
      set(val){
        console.log('设置了图片')
        this.$set(this.form, 'category_icon', val[0])
      }
    },
    dialogTitle(){
      if(this.dialogMode === 'add1'){
        return '添加一级分类'
      }else if(this.dialogMode === 'add2'){
        return '添加二级分类'
      }else if(this.dialogMode === 'edit1'){
        return '编辑一级分类'
      }else{
        return '编辑二级分类'
      }
    }
  },
  data() {
    return {
      statusList: [{id:1, label: '显示'}, {id:0, label: '不显示'}],
      aduList: [{id:1, label: '需要审核'}, {id:0, label: '不需要审核'}],
      rules: {
        category_icon: [
          { required: true, message: '请上传图标', trigger: 'blur' }
        ],
        category_name: [
          { required: true, message: '请输入名称', trigger: 'blur' }
        ]
      },
      imgUrl: config.imgUrl,
      mainList: [],
      roleList: [],
      form: {
        category_icon: ''
      },
      page: {
        total: 1,
        curpage: 1
      },
      dialogMode: 'add',
      dialogFormVisible: false
    }
  },
  methods: {
    statusFmt(row, column, cellValue){
      let obj = {
        '0': '不显示',
        '1': '显示'
      }
      return obj[cellValue]
    },
    auditFmt(row, column, cellValue){
      let obj = {
        '0': '需要审核',
        '1': '不需要审核'
      }
      return obj[cellValue]
    },
    rankUp(arr, index){
      if(index === 0){
        return
      }
      let sendObj = {}
      sendObj.curr_id = arr[index].category_id
      sendObj.other_id = arr[index - 1].category_id
      this._rankCateGory(sendObj)
    },
    rankDown(arr, index){
      console.log(index)
      let len = arr.length
      if(len-1 === index){
        return 
      }
      let sendObj = {}
      sendObj.curr_id = arr[index].category_id
      sendObj.other_id = arr[index + 1].category_id
      this._rankCateGory(sendObj)

    },
    _rankCateGory(data){
      rankCateGory(data).then(res => {
        if(res){
          this.$message({
            message: '操作成功',
            type: 'success'
          })
          this._caozuoAfter()
        }
      })
    },
    del(row){
      this.$confirm('是否确定删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this._delCateGory(row)
      })
    },
    _delCateGory(row){
      delCateGory(row.category_id).then(res => {
        this.$message({
          message: res.rMsg,
          type: 'success'
        })
        this._caozuoAfter()
      })
    },
    addEdit(type, row){
      this.dialogMode = type
      this.dialogFormVisible = true
      let obj = {category_enable: 1}
      if(type === 'add1'){
        obj.category_audit = 1
        obj.parent_id = 0
      }else if(type === 'add2'){
        obj.parent_id =  row.category_id
      }else if(type === 'edit1' || type === 'edit2'){
        delete row.child
        obj = JSON.parse(JSON.stringify(row))
      }
      obj.category_type = 1
      this.form = {...obj}
    },
    doAction(){
      this.$refs['form'].validate().then(() => {
        let sendData = this.form
        addOrEditCateGory(sendData).then(res => {
          if(res){
            this.$message({
              message: '操作成功',
              type: 'success'
            })
            this._caozuoAfter()
          }
        })
      })
      
    },
    _caozuoAfter(){
      this.dialogFormVisible = false
      this.page.curpage = 1
      this._mainList()
    },
    initData(){
      this.form = {}
    },
    _mainList(){
      getCateGoryList(this.page.curpage).then(res => {
        this.page.total = res.pageInfo.Total
        this.mainList = res.rData
      })
    }
  },
  created(){
    this._mainList()
  }
}
</script>

<style lang="scss" scoped>
.mytable /deep/ .el-table td{
  vertical-align: top;
}
.mytable /deep/ .el-button{
  padding: 0px 2px;
}
.icon-arrowsupline, .icon-arrowsdownline{
  cursor: pointer;
}
.categoryimg{
  width: 100px;
}
.c999{
  color: #999;
}
.bigicon{
  font-size: 22px;
  font-weight: bold;
}
.blue{
  color: #409EFF;
}
.blod{
  font-weight: bold;
}
</style>
